<!DOCTYPE html>
<html lang="en">
<link>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Para管理</title>
    <meta name="description" content="Para管理">
    <meta name="keywords" content="Para管理">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

    <!-- 引入样式/组件 -->
    <link rel="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/elementui.css"/>
    <script src="../js/vue.js"></script>
    <script src="../js/elementui.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/util.js"></script>

<body class="hold-transition">

<div id="app">

    <div class="content-header">
        <h1>Para管理<small>Para管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>Para管理</el-breadcrumb-item>
            <el-breadcrumb-item>Para管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="app-container">
        <div class="box">
            <div class="filter-container">
            <!--查询表单-->
            <el-form :inline="true">
                <el-form-item label="名称">
                    <el-input v-model="searchMap.name" placeholder="名称" class="filter-item">
                    </el-input>
                </el-form-item>
                <el-form-item label="选项">
                    <el-input v-model="searchMap.options" placeholder="选项" class="filter-item">
                    </el-input>
                </el-form-item>
                <el-button type="primary" @click="findPage()">查询</el-button>
                <el-button type="primary" class="butT" @click="formVisible=true;formData={templateId:templateId}">添加参数</el-button>
                <el-button type="primary" onclick="location.href='template.html'" >返回模板列表</el-button>
            </el-form>
            </div>

            <el-table :data="tableData"
                      style="width:100%">
                <el-table-column
                                        prop="id"
                                        label="ID"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="name"
                                        label="名称"
                                        width="180">
                </el-table-column>
                <el-table-column
                                        prop="options"
                                        label="参数选项"
                                        width="180">
                </el-table-column>

                <el-table-column

                                        label="操作"
                                        width="180">

                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row.id)" size="mini" type="primary" size="small">修改</el-button>
                        <el-button @click="del(scope.row.id)" size="mini" type="danger" size="small">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

            <div class="pagination-container">
                <el-pagination @size-change="findPage"
                               @current-change="findPage"
                               :current-page.sync="currentPage"
                               :page-sizes="[10,30,50,100]"
                               :page-size="size"
                               layout="total,sizes,prev,pager,next,jumper"
                               :total="total">
                 </el-pagination>
            </div>

            <el-dialog title="添加/编辑" :visible.sync="formVisible">
                <el-form>
                    <el-form-item label="名称">
                        <el-input v-model="formData.name" placeholder="名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="参数选项">
                        <el-input v-model="formData.options" type="textarea" :autosize="{minRows:4,maxRows:15}" placeholder="选项">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="formData.seq" placeholder="排序">
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="save()">提交</el-button>
               <el-button @click="formVisible=false">关闭</el-button>
            </el-dialog>
        </div>
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data:{
            tableData:[],
            currentPage:1,
            size:10,
            total:10,
            searchMap:{},
            formVisible:false,
            formData:{},
            templateId:0
        },
        created(){
            this.templateId = getQueryString('tid');
            this.searchMap = {
                templateId: getQueryString('id')
            };
            this.findPage();
        },
        methods:{
            findPage(){
                axios.post(`/para/findPage.do?page=${this.currentPage}&&size=${this.size}`,this.searchMap).then( res=>{
                        this.tableData = res.data.rows;
                        this.total = res.data.total;
                })
            },
            save(){ // 带@RequestBody
                this.formData.options = this.formData.options.replace(/\n/g,",");
                axios.post(`/para/${this.formData.id==null ? "add" : "update"}.do`,this.formData).then( res=>{
                        alert("操作成功");
                        this.findPage();
                        this.formVisible = false; // 关闭窗口
                })
            },
            edit(id){ // 不带@RequestBody
                // 根据ID查询记录 回显
                axios.get(`/para/findById.do?id=${id}`).then( res=>{
                    this.formVisible = true; // 打开窗口
                    this.formData = res.data;
                    this.formData.options = this.formData.options.replace(/,/g,"\n",)
                })
            },
            del(id){ // 不带@RequestBody
                this.$confirm('确定要删除此记录吗?','提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        axios.get(`/para/delete.do?id=${id}`).then(
                            res => {
                                alert("删除成功");
                                this.findPage();
                            }
                        )
                    }
                )
            }
        }
    })
</script>

</body>
</html>